import { useEffect } from 'react';
import DPlayer from 'dplayer';
import { v4 as uuid } from 'uuid';
import styled from 'styled-components';

export const Player = styled.div``;

/**
 * 视频播放器组件
 *
 * @param {Object} props 属性
 * @param {String} props.src 视频地址 (必填)
 * @param {number} props.height 视频高度
 * @param {number} props.width 视频宽度
 */
export default function VideoPlayer(props) {
  const id = `id-${uuid()}`.replace(/-/g, '');

  useEffect(() => {
    window.player = new DPlayer({
      container: document.getElementById(id),
      // 自动播放
      autoplay: false,
      video: {
        // 视频地址
        url: props.src
        // 视频封面
        // pic: 'https://demo-minio.playedu.xyz/playedu/images/ZIEtmejeH36clsswrkjAa0qKwIRvbBSl.png'
      }
    });

    return () => {
      window.player.destroy();
    };
  }, [props.src]);

  return (
    <>
      <Player id={id} style={{ width: props.width ?? '100%', height: props.height ?? '100%' }} />
    </>
  );
}
